import {type ReactNode} from 'react';
import {Pressable, PressableProps, View} from 'react-native';
import {Icon, useAppTheme, Text} from 'tsun-smart-ui';
export default ({
  value,
  label,
  ...rest
}: {value: boolean; label: string | ReactNode} & PressableProps) => {
  const theme = useAppTheme();
  return (
    <Pressable className="flex-row items-center" {...rest}>
      <View
        className="rounded-full border"
        style={{
          backgroundColor: value
            ? theme.colors?.brand?.primary
            : theme.colors?.neutral?.white,
          borderColor: value
            ? theme.colors?.brand?.primary
            : theme.colors?.border?.primary,
        }}>
        <Icon
          name="check"
          size={14}
          color={value ? theme.colors?.background?.primary : 'transparent'}
        />
      </View>
      {typeof label === 'string' ? (
        <Text className='ml-[3]' style={{color: theme.colors?.neutral?.secondaryTitle}}>{label}</Text>
      ) : (
        <View className="ml-[3] flex-1">{label}</View>
      )}
    </Pressable>
  );
};
